<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8"/>
    <title>1_画图</title>
</head>
<body>
<canvas id="canvas" style="display: block;margin: 0 auto;border: 1px solid #aaaaaa">
    您的浏览器尚不支持canvas
</canvas>

<!--script-->
<script>
    window.onload = function () {
        var canvas = document.getElementById('canvas'),
            context = canvas.getContext('2d'),
            img = new Image();

        canvas.width = 890;
        canvas.height = 600;

        //context.fillStyle = "red";
        //context.fillRect(100, 100, 400, 400);

        img.src = "img/img.jpg";
        img.onload = function () {//图片加载完成后的回调
            //context.drawImage(img,-1,-1); //img,x,y
            //context.drawImage(img,-1,-1,canvas.width,canvas.height); //img,x,y,w,h
            context.drawImage(img, 200, 200, 400, 400, 0, 0, canvas.width,canvas.height); //img,sx,sy,sw,sh,dx,dy,dw,dh
        };
    }
</script>
</body>
</html>
